// 函数组件
import React, { useState, useEffect, useContext } from 'react'
import '../../css/GoodEvaluationDetail.css'
import { PlusOutlined } from '@ant-design/icons'
import {
	Form,
	Input,
	Button,
	Radio,
	Select,
	Cascader,
	DatePicker,
	InputNumber,
	TreeSelect,
	Switch,
	Checkbox,
	Upload,
	Space,
} from 'antd'
const { TextArea } = Input
const { RangePicker } = DatePicker
function GoodEvaluationDetail() {
	const [xxx, setXxx] = useState('')

	useEffect(() => {
		console.log('GoodEvaluationDetail组件来咯')
	}, [])

	const [input, setInput] = useState<string>()
	const [text, setText] = useState<string>()
	const inputChange = (e: any) => {
		// console.log('e',e.target.value);
		setInput(e.target.value)
	}
	const TextAreaChange = (e: any) => {
		// console.log('TextArea=======>',e.target.value);
		setText(e.target.value)
	}

	const reset = () => {
		window.location.reload()
	}
	const getMeg = () => {
		console.log('回复的数据=======>', input, text)
	}
	return (
		<div className="GoodEvaluationDetail">
			<div className="GoodEvaluationDetailHead">
				<p className="head">评价详情</p>
				<p>
					<Button onClick={reset}>刷新</Button>
				</p>
			</div>
			<div className="operate-wrap">
				<div>
					<p>评价详情</p>
				</div>
				<div className="contengbox">
					<div className="Detailleft">
						<div>
							<img
								src="https://img0.baidu.com/it/u=907019176,2319043046&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=727"
								alt=""
							/>
							<p>吴彦祖</p>
						</div>
						<ul>
							<li>商品：2019新款冲锋衣</li>
							<li>尺码：XL/红色</li>
							<li>评分：5分</li>
							<li>评价时间：2019-01-03 14：40：30</li>
							<li>IP地址：192.168.10.22</li>
						</ul>
					</div>
					<div className="Detailright">
						<p>评论内容</p>
						<div>
							<p>
								这是评论详情，这是评论详情，这是评论详情，这是评论详情，这是评论详情，这是评论详情，这是评论详情，这是评论详情，这是评论详情，这是评论详情，这是评论详情，这是评论详情，这是评论详情，这是评论详情，这是评论详情，这是评论详情，这是评论详情，这是评论详情，这是评论详情，这是评论详情，这是评论详情，这是评论详情，这是评论详情，这是评论详情，这是评论详情，这是评论详情，这是评论详情，这是评论详情，这是评论详情，这是评论详情，这是评论详情，这是评论详情，这是评论详情，这是评论详情，这是评论详情，这是评论详情，这是评论详情，这是评论详情，这是评论详情，这是评论详情，这是评论详情，这是评论详情，这是评论详情，这是评论详情，这是评论详情，这是评论详情，这是评论详情，这是评论详情，这是评论详情，
							</p>
						</div>
						<div>
							<p>评价图片</p>
							<div>
								<img
									src="https://img0.baidu.com/it/u=907019176,2319043046&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=727"
									alt=""
								/>
								<img
									src="https://img0.baidu.com/it/u=907019176,2319043046&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=727"
									alt=""
								/>
								<img
									src="https://img0.baidu.com/it/u=907019176,2319043046&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=727"
									alt=""
								/>
								<img
									src="https://img0.baidu.com/it/u=907019176,2319043046&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=727"
									alt=""
								/>
							</div>
						</div>
						<div>
							<p>评价回复</p>
							
								<Form.Item
									className="Evainput"
									label="用户名"
									style={{ width: '400px', marginTop: '5px' }}
								>
									<Input onChange={inputChange} />
								</Form.Item>
								<Form.Item
									className="Evatext"
									label="回复内容"
									style={{ width: '400px', marginTop: '5px' }}
								>
									<TextArea
										placeholder="请输入回复内容"
										rows={4}
										onChange={TextAreaChange}
									/>
								</Form.Item>

								<Button
									className="Evabutton"
									style={{ backgroundColor: 'gray', color: 'white' }}
									onClick={getMeg}
								>
									回复	
								</Button>
							
						</div>
					</div>
				</div>
			</div>
		</div>
	)
}

export default GoodEvaluationDetail
